<template>
  <div>
    <!-- 输入框和添加按钮 -->
    <div>
      <!-- 使用 v-model 绑定输入框的值到 newItemName -->
      <input type="text" v-model="newItemName" @keyup.enter="addItem"> 
      <!-- 点击按钮触发 addItem 方法 -->
      <button @click="addItem">添加</button>
    </div>
    <!-- 表格 -->
    <table border="">
      <thead>
        <th>标识</th>
        <th>待办事项</th>
        <th>操作</th>
      </thead>
      <tbody>
        <!-- 使用 v-for 指令动态渲染每一行数据 -->
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <!-- 点击链接触发 deleteItem 方法，传入当前项目的 id -->
            <a @click="deleteItem(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 创建响应式的待办事项列表
const list = ref([
  { id: 1, name: '吃饭' },
  { id: 2, name: '睡觉' },
  { id: 3, name: '写代码' }
]);

// 创建响应式变量用于存储输入框的值
const newItemName = ref('');

// 添加待办事项的方法
const addItem = () => {
  // 检查输入是否为空
  if (newItemName.value.trim() === '') return;
  // 生成新的 id
  const newId = list.value.length > 0 ? Math.max(...list.value.map(item => item.id)) + 1 : 1;
  // 创建新的待办事项对象
  const newItem = { id: newId, name: newItemName.value };
  // 将新的待办事项添加到列表中
  list.value.push(newItem);
  // 清空输入框
  newItemName.value = '';
};

// 删除待办事项的方法
const deleteItem = (id) => {
  // 使用 filter 方法过滤掉要删除的项目
  list.value = list.value.filter(item => item.id !== id);
};
</script>